import React from 'react';
import styles from './style.css'
import pageRedux from '../pageRedux'
import MyLayout from '../../component/MyLayout';
import {post_user_login} from "../../api/user";
import {clearNull} from "../../util/str";
import MyAlert1 from "../../util/alert";
import {getHistory} from "../../util/uitls";
import {getStoreUtil, setStoreUtil} from "../../util/store";

export class Login extends React.Component {
    constructor(props) {
        super()
        this.getStore = getStoreUtil.bind(props)
        this.setStore = setStoreUtil.bind(props)

        this.state = {
            name: "",
            password: ""
        }
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
    }

    async sumbit() {
        MyAlert1.confirm("ok")
        var name = clearNull(this.state.name)
        var password = clearNull(this.state.password)
        if (!name) {
            MyAlert1.fail("name is not null")
            return false;
        }
        if (!password) {
            MyAlert1.fail("password is not null")
            return false;
        }
        var result1 = await post_user_login({name, password})

        if (result1.success) {
            MyAlert1.success("login success")
            this.setStore("app.userToken", result1.result.token)
            this.setStore("app.user", result1.result.user)
            setTimeout(() => {
                getHistory().replace("/home")
            }, 300)
        }
    }

    name(e) {
        var value = e.target.value
        this.setState({
            name: value
        })
    }

    password(e) {
        var value = e.target.value
        this.setState({
            password: value
        })
    }


    render() {
        var self = this
        return <MyLayout title="login">
            <div className={styles.formItem}>
                {/* <div className={styles.labkle}>账户</div> */}
                <div className={styles.inputWrapper}>
                    <input className={`${styles.input} `}
                           onChange={this.name.bind(this)}
                           placeholder="邮箱/账户/验证手机"/>
                </div>

            </div>
            <div className={styles.formItem}>
                {/* <div className={styles.labkle}>密码</div> */}
                <div className={styles.inputWrapper}>
                    <input
                        placeholder="密码"
                        onChange={this.password.bind(this)}
                        className={`${styles.input} `} type="password"/>
                </div>

            </div>

            <div className={styles.btns}>
                <button className={styles.login} onClick={this.sumbit.bind(this)}>登录</button>
                {/* <button className={styles.login}>短信验证码登录</button> */}
            </div>

            <div className={styles.login2}>
                <a href="/login-mobile">短信验证码登录</a>
                <a href="/register-mobile">注册</a>
            </div>


        </MyLayout>
    }
}

import {connect} from 'react-redux'

export default connect(function (state, myProps) {
    return {_store: state, store: state, ...myProps}
}, function (dispatch, ownProps) {
    return {
        dispatch,
    }
})(Login)